<!--班级情况-->
<template>
  <el-row :gutter="10" class="mb8">
    <el-col :span="12">
      <el-button type="primary" plain @click="handleExport">
        导出签到情况表
      </el-button>
    </el-col>

    <el-form style="position: absolute; right: 50px">
      <el-form-item label="只看本周" prop="onlyThisWeek">
        <div>
          <el-switch
            v-model="queryParams.onlyThisWeek"
            active-value="0"
            inactive-value="1"
            @change="getList"
          />
        </div>
      </el-form-item>
    </el-form>

    <right-toolbar :search="false" @queryTable="getList"> </right-toolbar>
  </el-row>
  <el-table v-loading="loading" :data="list" border>
    <!-- <el-table-column label="序号" width="55" align="center">
      <template #default="scope">
        <span>{{
          (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
        }}</span>
      </template>
    </el-table-column> -->
    <el-table-column
      label="上课时间"
      align="center"
      prop="classDate"
      min-width="240"
    >
      <template #default="scope">
        {{
          scope.row.weekNum
            ? scope.row.classDate.slice(0, 10) +
              "(周" +
              {
                1: "一",
                2: "二",
                3: "三",
                4: "四",
                5: "五",
                6: "六",
                7: "日",
              }[scope.row.weekNum] +
              ")" +
              "  " +
              scope.row.classStartTime +
              "~" +
              scope.row.classEndTime
            : scope.row.classDate.slice(0, 10) +
              "  " +
              scope.row.classStartTime +
              "~" +
              scope.row.classEndTime
        }}
      </template>
    </el-table-column>
    <el-table-column label="授课课程" align="center" prop="courseNameC" />
    <el-table-column label="上课教室" align="center" prop="classRoomName" />
    <el-table-column label="主班老师" align="center" prop="teacherName" />
    <el-table-column
      label="助教老师"
      align="center"
      prop="assistantName"
      min-width="60"
    />
    <el-table-column label="上课内容" align="center" prop="description" />
    <el-table-column
      label="点名时间"
      align="center"
      prop="callTime"
      min-width="160"
    >
      <template #default="scope">
        {{
          scope.row.callTime &&
          scope.row.callTime.slice(0, 10) +
            "    " +
            scope.row.callTime.slice(11, 19)
        }}
      </template>
    </el-table-column>
    <el-table-column label="授课课时" align="center" prop="classHour" />
    <el-table-column label="实到人数" align="center" prop="callNum">
      <template #default="scope">
        <el-button link type="primary" @click="handleDetail(scope.row, false)">
          {{ scope.row.callNum + "/" + scope.row.totalNum }}
        </el-button>
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      align="center"
      width="240"
      class-name="small-padding fixed-width"
    >
      <template #default="scope">
        <div v-if="scope.row.button === 0 && props.beOver === '1'">
          <el-button
            link
            type="primary"
            @click="handleRollCall(scope.row)"
            v-if="scope.row.beforeState === 0"
          >
            点名
          </el-button>
          <el-button
            link
            type="primary"
            @click="handleAdjust(scope.row)"
            v-hasPermi="['registrar:class:adjust']"
          >
            调整课次
          </el-button>
          <el-button
            link
            type="primary"
            @click="handleDetail(scope.row, true)"
            v-hasPermi="['registrar:class:adjust']"
          >
            查看详情
          </el-button>
          <el-button
            link
            type="primary"
            @click="handleDelete(scope.row)"
            v-hasPermi="['registrar:class:adjust']"
          >
            删除
          </el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <pagination
    v-show="total > 0"
    :total="total"
    v-model:page="queryParams.pageNum"
    v-model:limit="queryParams.pageSize"
    @pagination="getList"
    size="small"
  />

  <RollCallDetail
    ref="rollCallRef"
    :form="form"
    :classTitle="props.classTitle"
    :orderNo="form.orderNo"
    :ifEdit="ifEdit"
    v-bind="$props"
    @refreshPage="getList"
  />
  <AdjustDialog ref="adjustRef" v-bind="$props" @refreshPage="getList" />
  <RollCallMake
    ref="makeRef"
    v-bind="$props"
    @refreshPage="getList"
    from="rollcall"
  />
</template>

<script setup>
import RollCallDetail from "./rollCallDetail.vue";
import AdjustDialog from "./adjustDialog.vue";
import RollCallMake from "./rollCallMake.vue";
import {
  getRollCallListAPI,
  deleteOrderInRollCallAPI,
  exportOrderListAPI,
} from "@/api/registrar/class";

const props = defineProps({
  // 关联课程id,多个用逗号分隔
  courseFilterIds: {
    type: String,
  },
  classId: {
    type: String,
  },
  classTitle: {
    type: String,
  },
  isVip: {
    type: String,
  },
  // 结业状态
  beOver: {
    type: String,
  },
});

// 变量--------------------------------------------------------------------------------------------------------------------
const { proxy } = getCurrentInstance();
const loading = ref(false);
const total = ref(0);
const list = ref([]);
const rollCallRef = ref(null);
const adjustRef = ref(null);
const makeRef = ref(null);

const ifEdit = ref(true);

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    onlyThisWeek: "0",
  },
  form: {
    classDate: "",
  },
});

const { queryParams, form } = toRefs(data);
// 事件-----------------------------------------------------------------------------------------

// 导出
function handleExport() {
  exportOrderListAPI({ classId: props.classId }).then((res) => {
    let blob = new Blob([res], {
      type: "application/vnd.ms-excel;charset=utf-8",
    });
    //var contentDisposition = decodeURI(res.headers["content-disposition"]);
    const url = window.URL.createObjectURL(blob),
      link = document.createElement("a"); // 创建a标签
    link.href = url;
    link.download = "签到情况表";
    link.click();
    URL.revokeObjectURL(url); // 释放内存
    proxy.$modal.msgSuccess("导出成功");
  });
}

// 班级点名
function handleRollCall(row) {
  makeRef.value.handleOpen(row);
}

// 调整课次
function handleAdjust(row) {
  adjustRef.value.handleDialogOpen(row);
}

// 查看课时详情
function handleDetail(row, edit) {
  ifEdit.value = edit;
  rollCallRef.value.getRollCallDetail(row);
}

// 删除课次
function handleDelete(row) {
  deleteOrderInRollCallAPI({
    orderNo: row.orderNo,
  }).then(() => {
    getList();
  });
}

// 方法------------------------------------------------------------------------------------------
function getList() {
  loading.value = true;
  getRollCallListAPI({ ...queryParams.value, classId: props.classId }).then(
    (response) => {
      list.value = response.rows;
      total.value = response.total;
      loading.value = false;
    }
  );
}

// 调用------------------------------------------------------------------------------------------
getList();
</script>

<style lang="scss" scoped>
.pagination-container {
  margin-bottom: 20px;
}
</style>
